<template>
    <view :class="$style.module">
        <view :class="$style.header">
            <view :class="$style.title">{{title }}</view>
            <navigator :class="$style.arrow" :openType="openType" :url="url"><text :class="$style.text">更多</text><uni-icons type="right" color="#90A3BF" size="12"></uni-icons></navigator>
        </view>
        <view :class="$style.body">
            <slot></slot>
        </view>
    </view>
</template>

<script lang="ts" setup>
    withDefaults(defineProps<{
        title : string;
        url : string;
        openType:string
    }>(), {
        openType : 'navigate'
    })
</script>

<style lang="scss" module>
    $space : 20rpx;
    .module{
        background-color: #fff;
        border-radius: 16rpx;
        padding: 0 $base-space;
        padding-bottom:$base-space;
        
        .header{
            height: 88rpx;
            padding: $space 0 $space $space;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid $background-color;

            .title{
                font-size: 28rpx;
                font-weight: bold;
                color: #000;
                position: relative;
                &::after{
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 148rpx;
                    height: 20rpx;
                    border-radius: 100rpx;
                    background: linear-gradient(90deg, rgba(0, 82, 217, 0.35) 0%, rgba(0, 82, 217, 0) 80%);
                    z-index: 0;
                }

            }

            .arrow{
                display: flex;
                align-items: center;

                .text{
                    font-size: 24rpx;
                    color: #90A3BF;
                    margin-right: 10rpx;
                }
            }
            
        }

        .body{
            margin-top: $base-space;
        }


    }
</style>